<!--富文本编辑器-->
<template>
    <div class="edit_container">
        <!--  新增时输入 -->
        <quill-editor
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            :style="{height:'340px'}"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @input="onEditorInput($event)"
            @change="onEditorChange($event)">
        </quill-editor>
    </div>
</template>
<script>
import { quillEditor } from "vue-quill-editor";
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
export default {
    props:['richtext'],
    components: {
        quillEditor
    },
    data() {
        return {
            content:this.richtext ? this.richtext : '' ,
            // 富文本编辑器配置
            editorOption: {
                modules: {
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
                        ['blockquote', 'code-block'], // 引用  代码块
                        [{ header: 1 }, { header: 2 }], // 1、2 级标题
                        [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
                        [{ script: 'sub' }, { script: 'super' }], // 上标/下标
                        [{ indent: '-1' }, { indent: '+1' }], // 缩进
                        [{ direction: 'rtl' }], // 文本方向
                        [{ size: ['12px', false, '16px', '18px', '20px', '30px'] }], // 字体大小
                        [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
                        [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                        [{ font: [false, 'SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }], // 字体种类
                        [{ align: [] }], // 对齐方式
                        ['clean'], // 清除文本格式
                       // ['link', 'image', 'video']// 链接、图片、视频
                    ]
                },
                placeholder: '请输入内容...'
            }
        }
    },
    watch:{
        richtext(val){
            this.content = val;
        }
    },
    methods: {
        onEditorBlur(){
        }, // 失去焦点事件
        onEditorFocus(){
        }, // 获得焦点事件
        onEditorChange(){
        },
        onEditorInput(){
            this.$emit('inputQuill',this.content);//select事件触发后，自动触发showCityName事件
        },
        // 转码
        escapeStringHTML(str) {
            str = str.replace(/</g,'<');
            str = str.replace(/>/g,'>');
            return str;
        },
        publishArticle(){},
        previewArticle(){},
    },
    computed: {
        editor() {
            return this.$refs.myQuillEditor.quill;
        },
    },
    mounted() {
        this.$emit('inputQuill',this.content);
    }
}
</script>

<style>
.ql-editor{
    font-size: 16px;
    line-height: 28px;
}
.ql-snow .ql-editor a{
    text-decoration: none;
    color: #2696ff;
    font-weight: 600;
}
</style>
